<!--  -->
<template lang="html">
  <div class="editor_main">
      <div class="editor_text" ref="editor"></div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import Editor from 'wangeditor'
export default {
  name:'zzrEditor',
  //import引入的组件需要注入到对象中才能使用
  components: {
  },
  data() {
    //这里存放数据
    return {
        editor: null,
        info_: null
    };
  },
  model: {
      prop: 'value',
      event: 'change'
  },
  props:{
      value: {
        type: String,
        default: ''
      },
      isClear: {
        type: Boolean,
        default: false
      },
      height:{
        type:Number,
        default:400
      }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
      isClear(val) {
        // 触发清除文本域内容
        if (val) {
          this.editor.txt.clear()
          this.info_ = null
        }
      },
      value: function(value) {
        if (value !== this.editor.txt.html()) {
          this.editor.txt.html(this.value)
        }
      }
  },
  //方法集合
  methods: {
      setEditor(){
        const editor = new Editor(this.$refs.editor);
        editor.config.uploadImgShowBase64 = false // base 64 存储图片
        editor.config.uploadImgServer = process.env.NODE_ENV=='development'?'/api/common/savePics':this.uploadUrl// 配置服务器端地址
        editor.config.uploadImgHeaders = { }// 自定义 header
        editor.config.uploadFileName = 'pic' // 后端接受上传文件的参数名
        editor.config.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
        editor.config.uploadImgMaxLength = 1 // 限制一次最多上传 3 张图片
        editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
        editor.config.zIndex = 20
        editor.config.height = this.height
        // editor.config.fontSizes = {
        //     'x-small': { name: '10px', value: '1' },
        //     'small': { name: '13px', value: '2' },
        //     'normal': { name: '16px', value: '3' },
        //     'large': { name: '18px', value: '4' },
        //     'x-large': { name: '24px', value: '5' },
        //     'xx-large': { name: '32px', value: '6' },
        //     'xxx-large': { name: '48px', value: '7' },
        // }
        editor.config.menus = [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          'undo', // 撤销
          'redo', // 重复
          'fullscreen' // 全屏
        ];
        editor.config.uploadImgHooks = {
          fail: (xhr, editor, result) => {
            // 插入图片失败回调
          },
          success: (xhr, editor, result) => {
            // 图片上传成功回调
            console.log(xhr, editor, result)
          },
          timeout: (xhr, editor) => {
            // 网络超时的回调
          },
          error: (xhr, editor) => {
            // 图片上传错误的回调
          },
          customInsert: (insertImgFn, result) => {
            insertImgFn(result.zzrresult.pic[0].picpath)
          }
        }
        editor.config.onchange = (html) => {
          this.info_ = html // 绑定当前逐渐地值
          this.$emit('change', this.info_) // 将内容同步到父组件中
        }
        editor.config.onchangeTimeout = 500
        // 创建富文本编辑器
        editor.create()
        this.editor = editor
      }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
      this.setEditor();
      this.editor.txt.html(this.value)
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {
    this.editor.destroy()
    this.editor = null
  }, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
.editor_main
    >>>.editor_text
        font[size="1"] {
            font-size: 10px;
        }
        font[size="2"] {
            font-size: 13px;
        }
        font[size="3"] {
            font-size: 16px;
        }
        font[size="4"] {
            font-size: 18px;
        }
        font[size="5"] {
            font-size: 24px;
        }
        font[size="6"] {
            font-size: 32px;
        }
        font[size="7"] {
            font-size: 48px;
        }
</style>